<template>
  <div class="w">
    <el-tree
      style="max-width: 100%; padding: 20px 160px;"
      :data="bumenList"
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :props="props"
      :highlight-current="true"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <div style="min-width: 100px">
            <span>{{ data.managerName }}</span>
          </div>
        </span>
        <!-- 操作 -->
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            操作
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="add(data.id)">添加子部门</el-dropdown-item>
              <el-dropdown-item @click="edit(data.id)">编辑部门</el-dropdown-item>
              <el-dropdown-item @click="del(data.id)"> 删除 </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-tree>
    <!-- 删除 -->
    <Pop title="删除提示" ref="delRef" :xiao="delxiao" :confirm="delConfirm">
      <template #cont> 确认删除？ </template>
    </Pop>
    <Pop
      :title="title"
      ref="editRef"
      :xiao="
        () => {
          editRef.close();
          formRef.resetFields();
        }
      "
      :confirm="Confirm"
    >
      <template #cont>
        <el-form
          ref="formRef"
          style="max-width: 600px"
          :model="form"
          label-width="auto"
          class="demo-dynamic"
        >
          <el-form-item
            prop="name"
            label="部门名称"
            :rules="[
              {
                required: true,
                message: '名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.name" />
          </el-form-item>
          <el-form-item
            prop="code"
            label="部门编码"
            :rules="[
              {
                required: true,
                message: '编码不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input v-model="form.code" />
          </el-form-item>

          <el-form-item
            prop="name"
            label="部门负责人"
            :rules="[
              {
                required: true,
                message: '请选择负责人',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              v-model="form.managerId"
              placeholder="选择部门负责人"
              size="large"
              style="width: 240px"
            >
              <el-option
                v-for="item in FuzerenList"
                :key="item.id"
                :label="item.username"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="introduce"
            label="部门介绍"
            :rules="[
              {
                required: true,
                message: '编码不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input :rows="3" type="textarea" v-model="form.introduce" />
          </el-form-item>
        </el-form>
      </template>
    </Pop>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watchEffect, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { routerArray } from "@/router/index";
import axios from "@/utils/request";
import { ElMessage } from "element-plus";
import createCategoryTree from "@/hooks/createCategoryTree";
import { ArrowDown } from "@element-plus/icons-vue";
import Pop from "@/components/popUp.vue";
let delRef = ref(null);
let addRef = ref(null);
let editRef = ref(null);
let formRef = ref(null);
let bumenList = ref([]);
let props = {
  label: "name",
  children: "children",
  class: "list",
};
let Id = ref();
let FuzerenList = ref();
let form = ref({
  id: undefined,
  pid: undefined,
  name: undefined,
  code: undefined,
  managerId: undefined,
  introduce: "",
  createTime: "",
});
let title = ref("");

function add(id) {
  Id.value = id;
  title.value = "添加部门";
  editRef.value.open();
}
function Confirm() {
    if(!formRef.value) return
  formRef.value.validate((val) => {
    if (val) {
      if ((title.value = "添加部门")) {
        console.log(form.value)
        axios.post(`/company/department`,{
            code:form.value.code,
            introduce:form.value.introduce,
            managerId:form.value.managerId,
            name:form.value.name,
            pid:Id.value,
        }).then(res=>{
            if (res.success) {
              ElMessage.success(res.message);
              delRef.value.close();
              getBumenList();
              formRef.value.resetFields();
              editRef.value.close()
            } else {
              ElMessage.warning(res.message);
            }
          

        })


      } else {
        axios
          .put(`/company/department/${Id.value}`, {
            id: form.value.id,
            pid: form.value.pid,
            name: form.value.name,
            code: form.value.code,
            managerId: form.value.managerId,
            introduce: form.value.introduce,
            createTime: form.value.createTime,
          })
          .then((res) => {
            if (res.success) {
              ElMessage.success(res.message);
              delRef.value.close();
              getBumenList();
              formRef.value.resetFields();
              editRef.value.close()
            } else {
              ElMessage.warning(res.message);
            }
          });
      }
    }
  });
}
// ?编辑
function edit(id) {
  Id.value = id;
  title.value = "编辑部门";
  axios.get(`/company/department/${id}`).then((res) => {
    console.log(res);
    if (res.success) {
      form.value = res.data;
    }
  });
  editRef.value.open();
}
// ?删除
function del(id) {
  console.log(id);
  Id.value = id;
  delRef.value.open();
}
function delConfirm() {
  axios.delete(`/company/department/${Id.value}`).then((res) => {
    if (res.success) {
      ElMessage.success(res.message);
      delRef.value.close();
      getBumenList();
    } else {
      ElMessage.warning(res.message);
    }
  });
}

function delxiao() {
  delRef.value.close();
}

onMounted(() => {
  getBumenList();
  bumenFuzerenList();
});
function getBumenList() {
  axios.get("/company/department").then((res) => {
    // console.log(res);
    if (res.success) {
      bumenList.value = createCategoryTree(res.data);
    }
  });
}
function bumenFuzerenList() {
  axios.get("/sys/user/simple").then((res) => {
    // console.log(res);
    FuzerenList.value = res.data;
  });
}

// 递归函数
</script>

<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
::v-deep .el-tree-node__content {
  height: 40px;
  line-height: 40px;
}
.el-dropdown-link {
  height: 40px;
  line-height: 40px;
  margin-left: 15px;
}
.el-icon--right {
  height: 40px;
  line-height: 40px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
